
<template>
  <div>
    <div >
      <el-container style="overflow: auto">
<!--      主体-->
        <el-main id="index_main">

          <!--      首页巨幕-->
          <div>
            <a href="/"><img src="index.jpg" alt="" style="margin-top: 60px"></a>
          </div>
          <!--      首页主体-->
          <div style="width: 1000px;margin: 0 auto">
            <!--      每日精选菜谱开始-->
            <div class="dailyRecipe">
              <div>
                <div style="overflow: hidden">
                  <h2 style="float:left;margin-top: 40px">每日精选菜谱</h2>
<!--                 添加点击，跳转到菜谱浏览页面-->
                  <a @click="$router.push('/recipe')"><p style="float: right;margin-top: 40px">更多 ></p></a>
                </div>
              </div>
              <div style="margin-top: 30px;">
                <el-row gutter=40>
                  <el-col span="6" v-for="m in dailyRecipeArr" >
                    <div style="margin-top: 25px">
                      <a @click="$router.push('/recipe/details?recipeId='+m.id)">
                        <img :src="m.image" alt="" style="border-radius: 10px; width: 220px;">
                        <p class="title" style="text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;">{{m.title}}</p>
                      </a>

                      <p class="author">by {{m.authorNickName}}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--      每日精选菜谱结束-->
            <!--      笔记开始-->
            <div class="note">
              <div>
                <div style="overflow: hidden">
                  <h2 style="float:left;margin-top: 40px">笔记</h2>
                  <!--                  todo  添加点击，跳转到笔记浏览页面-->
                  <a @click="$router.push('/homepage')"><p style="float: right;margin-top: 40px">更多 ></p></a>
                </div>
              </div>
              <div style="margin-top: 30px;">
                <el-row gutter=40>

                  <el-col span="6" v-for="n in noteArr" >
                    <el-card style="width: 220px;height: 290px;position: relative;">
                      <img :src="n.picUrl" alt="" style="width: 220px;height: 220px;">
                      <div style="padding: 0px 10px;width: 200px;margin: 0 auto;text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;">
                        <a class="title" style="font-size: 15px; box-sizing: border-box;">{{n.title}}</a>
                      </div>

                      <div style="position:absolute;left: 3px;bottom: 2px;width: 100%;">
                        <img :src="n.authorPic" alt="" style="width: 22px;height: 22px; border-radius: 11px;float: left;margin-right: 3px;vertical-align: middle">
                        <p class="author" style="font-size: 8px;"> by {{n.authorName}}</p>
                      </div>
                    </el-card>
                  </el-col>

                </el-row>
              </div>
            </div>
            <!--      笔记结束-->
            <!--        新的布局容器，新加右列-->
            <div style="overflow: hidden">
              <el-container>

                <el-main>
                  <div style="width: 690px">
                    <!--        大家都在搜  开始-->
                    <h2 style="margin: 40px 0">大家都在搜</h2>
                    <div class="othersSearch_topic" >
                      <span v-for="n in searchArr" @click="searchRecipe(n.name)">{{n.name}}</span>
                    </div>
                    <!--        大家都在搜  结束-->
                    <!--            热门食材开始-->
                    <div class="popular">
                      <div>
                        <div style="overflow: hidden">
                          <h2 style="float:left;margin-top: 40px">热门食材</h2>
                          <a href=""><p style="float: right;margin-top: 50px;font-size: 13px">更多 ></p></a>
                        </div>
                      </div>
                      <div style="margin-top: 20px;width: 690px;height: 246px;padding: 4px 3px 24px 3px;background-color: #F1F7FA;border-radius: 10px">
                        <ul v-for="f in popularFoodArr" style="list-style-type: none">
                          <li style="float: left;text-align: center">
                            <div style="width: 80px;height: 104px;margin:20px 17px 0 17px ">
                              <img :src="f.picUrl" alt="" width="80" height="80">
                              <p>{{f.name}}</p>
                            </div>
                          </li>
                        </ul>
                      </div>

                    </div>
                    <!--            热门食材结束-->
                    <!--            精彩主题文章开始-->
                    <div class="article">
                      <div>
                        <div style="overflow: hidden">
                          <h2 style="float:left;margin-top: 40px">精彩主题文章</h2>
                          <a href=""><p style="float: right;margin-top: 50px;font-size: 13px">更多 ></p></a>
                        </div>
                      </div>
                      <el-row style="width: 690px;height: 122px;margin: 20px 0 30px 0;overflow: hidden">
                        <img src="article/1.jpg" alt="" width="200" height="112" style="border-radius: 8px;float: left" >
                        <div style="margin: 3px 0 0 12px;float: left">
                          <a >新品发布会，智宴释放出这几个绝佳优势</a>
                          <p style="margin-top: 60px;font-size: 13px">
                            <span style="margin-right: 50px">来自：食界大咖秀</span>
                            <span >作者：少油少盐</span>
                          </p>
                        </div>
                      </el-row>

                      <el-row>
                        <div style="width: 320px;float: left;margin-right: 30px;overflow: hidden">
                          <li style="height: 32px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">200元一斤的草莓？这个红遍全日本的奶茶品牌上新</li>
                          <li style="height: 32px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">美国开心果陪你一起打破格局，助燃今夏</li>
                          <li style="height: 32px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">乐享厨卫清洁的日式美学--“花王厨卫清洁系列”全新上市</li>
                        </div>
                        <div style="width: 320px;float: left;overflow: hidden">
                          <li style="height: 32px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">健康开心果，全民开心GO！</li>
                          <li style="height: 32px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">时光淬炼的“蔓“妙滋味</li>
                          <li style="height: 32px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">健康专家郑育龙教您如何用橄榄油吃出健康</li>
                        </div>
                      </el-row>

                    </div>
                    <!--            精彩主题文章结束-->

                    <!--            大家的作品开始-->
                    <div class="piece">
                      <div>
                        <div style="">
                          <h2 style="margin-top: 40px">大家的作品</h2>
                        </div>
                      </div>
                      <el-row style="margin-top: 25px" v-for="x in pieceArr">
                        <div style="float: left">
                          <img :src="x.picUrl" style="border-radius: 5px;float: left;width: 110px;height: 110px;">
                          <div style="float: left;width: 202px;height: 110px;margin-left: 6px;padding-top:26px ;font-size: 13px">
                            <p>{{x.title}}</p>
                            <p style="margin-top: 20px">对照菜谱做出来的作品 <b>{{x.num}}</b> 个</p>
                          </div>
                          <div style="float: right">
                            <el-col span="8">
                              <img :src="x.p_a" style="margin-left: 14px;width: 110px;height: 110px;border-radius: 8px">
                            </el-col>
                            <el-col span="8">
                              <img :src="x.p_b" style="margin-left: 14px;width: 110px;height: 110px;border-radius: 8px">
                            </el-col>
                            <el-col span="8">
                              <img :src="x.p_c" style="margin-left: 14px;width: 110px;height: 110px;border-radius: 8px">
                            </el-col>
                          </div>
                        </div>
                        <div style="float: right">

                        </div>
                      </el-row>

                    </div>
                    <!--            大家的作品结束-->



                  </div>
                </el-main>

                <div style="float: right">
                  <el-aside width="280px" >
                    <!--            豆果达人开始-->
                    <div style="overflow: hidden">
                      <h2 style="float:left;margin: 40px 0 30px 0;width: 210px">豆果达人</h2>
                      <a href=""><p style="float: right;margin: 45px 0 30px 0;font-size: 13px;color: #333333">更多 ></p></a>
                    </div>
                    <ul class="follow" v-for="p in talentArr">
                      <li >
                        <div style="overflow: hidden">
                          <img :src="p.picUrl" alt="" style="width: 46px;height: 46px;border-radius: 5px;float: left">
                          <div class="talent_info" style="float: left;margin-left: 6px">
                            <p class="follow_author">{{p.name}}</p>
                            <p class="follow_fans">{{p.fans}}粉丝</p>
                          </div>
                          <span style="float: right">+&nbsp关注</span>
                        </div>
                      </li>
                    </ul>
                    <!--            豆果达人结束-->

                    <!--            商城精选开始-->
<!--                    <div style="overflow: hidden">-->
<!--                      <h2 style="float:left;margin: 40px 0 30px 0;width: 210px">商城精选</h2>-->
<!--                      <a href=""><p style="float: right;margin: 45px 0 30px 0;font-size: 13px;color: #333333">更多 ></p></a>-->
<!--                    </div>-->
<!--                    <el-row v-for="n in selectedArr" style="margin-top: 20px">-->
<!--                      <img :src="n.picUrl" style="float: left;width: 88px;height: 88px;border-radius: 5px">-->
<!--                      <div style="float: right;width: 186px;font-size: 15px;">-->
<!--                        <div style="width: 186px;height: 40px;word-break: break-all;-->
<!--    text-overflow: ellipsis;-->
<!--    display: -webkit-box;-->
<!--    -webkit-line-clamp: 2;-->
<!--    -webkit-box-orient: vertical;-->
<!--    overflow: hidden;">-->
<!--                          <a href="" style="height: 40px;text-decoration: none;color: #333333">{{n.title}}</a>-->
<!--                        </div>-->

<!--                        <p style="font-size: 16px;color: #FF4C44;margin-top: 4px;">￥{{n.price}}</p>-->
<!--                        <p style="font-size: 12px;font-size: 12px;color: #999;margin-top: 7px;">月售：{{n.sale}}</p>-->
<!--                      </div>-->
<!--                    </el-row>-->
                    <!--            商城精选结束-->

                    <!--            豆果实验室开始-->
                    <!--                    <div style="overflow: hidden">-->
                    <!--                      <h2 style="margin: 40px 0 30px 0;width: 210px">豆果实验室</h2>-->
                    <!--                      <ul style="font-size: 13px">-->
                    <!--                        <li v-for="l in labArr" style="margin-top: 20px"><strong>·</strong> <a href="" style="text-decoration: none;color: #333333;">{{l.title}}</a></li>-->
                    <!--                      </ul>-->
                    <!--                    </div>-->
                    <!--            豆果实验室结束-->

                    <!--            动漫开始-->
                    <!--                    <div style="overflow: hidden">-->
                    <!--                      <h2 style="margin: 40px 0 30px 0;width: 210px">动漫</h2>-->
                    <!--                      <ul style="font-size: 13px">-->
                    <!--                        <li v-for="a in animeArr" style="margin-top: 20px"><strong>·</strong> <a href="" style="text-decoration: none;color: #333333;">{{a.title}}</a></li>-->
                    <!--                      </ul>-->
                    <!--                    </div>-->
                    <!--            动漫结束-->

                  </el-aside>
                </div>
              </el-container>
            </div>
          </div>

        </el-main>

        <!--    脚脚脚-->

        <el-footer style="background-color: #e6e5e5;height: 250px">
          <el-row style="height: 250px;width: 1000px;padding-top: 20px;margin: 0 auto">
            <el-col span="16">
              <img style="height: 30px"  class="wb100" src="https://cp1.douguo.com//static/nweb/images/logo3.png?20191218" alt="豆果美食logo">
              <p style="font: 12px Noto Sans;font-family: Georgia,Times,serif;
        font-size: 24px;
        color: #84b92c;
        line-height: 160%;" ><span>500万+</span>美食菜谱；
                <span>2000万+</span>互动内容；
                <span>3000+</span>美食课堂；
                <span>5000万+</span>用户每天都有新分享
              </p>
            </el-col>
            <el-col span="8" style="text-align: center">
              <p style="margin-bottom: 10px">扫二维码，下载豆果手机应用：</p>
              <el-row >
                <el-col span="8"><img src="https://cp1.douguo.com//static/nweb/images/qrcode.png?2001"  width="92" height="92">
                  <p>豆果美食</p>
                </el-col>
                <el-col span="8"><img src="https://cp1.douguo.com//static/nweb/images/xcx.jpg?2001"  width="92" height="92">
                  <p>微信扫一扫</p>
                </el-col>
                <el-col span="8"><img src="https://i1.douguo.com//upload/banner/1578991488.png" width="92" height="92">
                  <p>豆果公众号</p>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="text-align: center;font-size: 13px;padding: 10px 0;">
            <p> 关于豆果 · 在豆果工作 · 意见反馈 · 菜谱大全<br>
              北京豆果信息技术有限公司 京ICP证111032号<img src="https://i1.douguo.com//upload/banner/1564469142.png"> 京公网安备 11010502038268号 京ICP备09012748号<br>
              互联网药品信息服务资格证书<br>
              <img src="https://i1.douguo.com//upload/banner/1522057799.png" style="width: 20px;height: 20px;vertical-align: middle" alt="">京网文【2017】6954-770号 食品流通许可证SP1101061510252413<br>
              广播电视节目制作经营许可证（京）字第11624号</p>
          </el-row>
        </el-footer>


      </el-container>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      $:"",
      handleSelect(key, keyPath) {
        //key就是菜单项的index值 keyPath代表点击的菜单项完整路径
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      activeIndex: '1',
      activeIndex2: '1',
      searchArr:[
        {name:"家常菜"},{name:"快手菜"},{name:"下饭菜"},{name:"早餐"},{name:"凉菜"},
        {name:"素食"},{name:"烘焙"},{name:"主食"},{name:"小吃"},{name:"红烧肉"},
        {name:"可乐鸡翅"},{name:"红烧茄子"},{name:"酸菜鱼"},
      ],
      //每日精选菜谱
      dailyRecipeArr:[
        // {picUrl:"dailyRecipe/1.jpg",title:"#春日养生局#捞汁香菜拌牛肉",author:"BOBO蒲公英的自由 创意料理组"} ,
        // {picUrl:"dailyRecipe/2.jpg",title:"韭菜鸡蛋饼",author:"成成的一人食"} ,
        // {picUrl:"dailyRecipe/3.jpg",title:"#春日露营 易享“佳”味 #香...",author:"小小庆回国"} ,
        // {picUrl:"dailyRecipe/4.jpg",title:"快手菜-乾隆白菜",author:"沈十一的小厨房"} ,
        // {picUrl:"dailyRecipe/5.jpg",title:"烧鸡腿",author:"爱chi蜜蜂的花"} ,
        // {picUrl:"dailyRecipe/6.png",title:"金玉满堂 桂花椰汁冻 做法超简... ",author:"达人兔"} ,
        // {picUrl:"dailyRecipe/7.jpg",title:"糯米糕",author:"亲爱的阿雅呀"} ,
        // {picUrl:"dailyRecipe/8.jpg",title:"香椿的诱惑",author:"小吃货我的幸福生活"} ,
      ],
      //笔记
      noteArr:[
        { picUrl:"note/1.jpg", title:"白糖糕这样做，松软劲道软糯香",authorPic:"note/author/1.jpeg",authorName:"航哥妈妈" },
        { picUrl:"note/2.jpg", title:"嫩炒猪肝",authorPic:"note/author/2.jpeg",authorName:"奶油布丁的厨房" },
        { picUrl:"note/3.jpg", title:"早上不知道吃啥的，试试这个",authorPic:"note/author/1.jpeg",authorName:"航哥妈妈" },
        { picUrl:"note/4.jpg", title:"搅一搅、拌一拌，吃不腻的",authorPic:"note/author/4.jpeg",authorName:"归家小厨" },
      ],
      //豆果达人
      talentArr:[
        {picUrl:"talent/1.png",name:"颖涵的快厨房 ",fans:"168523",follow:""} ,
        {picUrl:"talent/2.jpg",name:"美食台 ",fans:"399301",follow:""} ,
        {picUrl:"talent/3.jpg",name:"康妮陈 ",fans:"221086",follow:""} ,
        {picUrl:"talent/4.jpg",name:"桌饭 ",fans:"114999",follow:""} ,
        {picUrl:"talent/5.jpeg",name:"承灿妈咪CCM ",fans:"195919",follow:""} ,
      ],
      //热门食材
      popularFoodArr:[
        {picUrl:"popularFood/1.jpg",name:"土豆"},
        {picUrl:"popularFood/2.jpg",name:"牛肉"},
        {picUrl:"popularFood/3.jpg",name:"鱼"},
        {picUrl:"popularFood/4.jpg",name:"白菜"},
        {picUrl:"popularFood/5.jpg",name:"茄子"},
        {picUrl:"popularFood/6.jpg",name:"鲍鱼"},
        {picUrl:"popularFood/7.jpg",name:"山药"},
        {picUrl:"popularFood/8.jpg",name:"柿子"},
        {picUrl:"popularFood/9.jpg",name:"羊肉"},
        {picUrl:"popularFood/10.jpg",name:"菊花"},
        {picUrl:"popularFood/11.jpg",name:"香蕉"},
        {picUrl:"popularFood/12.jpg",name:"板栗"},
      ],
      articleArr:[],
      pieceArr:[
        {picUrl:"piece/1.jpg",title:"涛涛妈咪的作品 ",num:"9795",p_a:"piece/1.1.jpg",p_b:"piece/1.2.jpg",p_c:"piece/1.3.jpg"} ,
        {picUrl:"piece/2.jpg",title:"万万的作品 ",num:"1175",p_a:"piece/2.1.jpg",p_b:"piece/2.2.jpg",p_c:"piece/2.3.jpg"} ,
        {picUrl:"piece/3.jpg",title:"dUcky的作品 ",num:"1477",p_a:"piece/3.1.jpg",p_b:"piece/3.2.jpg",p_c:"piece/3.3.jpg"} ,
      ],



    }


  },
  methods: {
    searchRecipe(name){
      // let path = this.$router.currentRoute.path;
      // if (path.startsWith('/sys-admin/product/spu/add-new-')) {
      //   path = '/sys-admin/product/spu/add-new-1';
      // }
      this.$router.replace('/');
      this.$router.push("recipe/search?keyword="+name);
    },

    handleActiveRecipeItem(){
      let currentPath=this.$router.currentRoute.path;
      if(currentPath.startsWith('/sys-admin/product/album')){
        currentPath='/sys-admin/product/album';
      }
      if(currentPath.startsWith('/sys-admin/product/attributeTemplate')){
        currentPath='/sys-admin/product/attributeTemplate';
      }
      if(currentPath.startsWith('/sys-admin/permission/admin')){
        currentPath='/sys-admin/permission/admin';
      }
      this.activeRecipeItemPath=currentPath;
    },
    loadNoteBrowsingList() {


      let url = 'http://localhost:8889/homepage/note-list';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.noteArr = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadSearchList() {

      let url = 'http://localhost:8889/homepage/search-list';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.searchArr = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadPopularFoodList() {

      let url = 'http://localhost:8889/homepage/popularFood-list';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.popularFoodArr = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadTalentList() {

      let url = 'http://localhost:8889/homepage/talent-list';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.talentArr = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadArticleList() {

      let url = 'http://localhost:8889/homepage/artical-list';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.articleArr = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadPieceList() {

      let url = 'http://localhost:8889/homepage/piece-list';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.pieceArr = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    //加载精选菜谱
    loadSelectedRecipeList(){
      let url = 'http://localhost:8889/recipe/list/bySort';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      console.log('localJwt = ' + localJwt);
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.dailyRecipeArr = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
  },
  mounted() {
  //todo 开发过程中暂时不加载
  //   this.handleActiveRecipeItem();

  //加载精选菜谱
    this.loadSelectedRecipeList();
  //
  //   //  加载笔记浏览信息的方法
  //   this.loadNoteBrowsingList();
  //   //  加载  大家都在搜  浏览信息的方法
  //   this.loadSearchList();
  //   //  加载  热门食材  浏览信息的方法
  //   this.loadPopularFoodList();
  //
  //   //  加载  豆果达人  浏览信息的方法
  //   this.loadTalentList();
  //   //文章
  //   this.loadArticleList();
  //
  // //  大家的作品
  //   this.loadPieceList();


  }
}

</script>

<style>
*{margin: 0;
  padding:0}
a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
  height: 30px;
  line-height: 20px;
}


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyRecipe  .title{font-size: 15px;line-height: 35px}
.dailyRecipe  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
  cursor: pointer;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
  cursor: pointer;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0 !important;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}

.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>


